<template>
  <!-- 音频播放器组件 -->
  <view v-if="url" class="flex justify-between align-center audio">
    <view @click="start(audioId)">
      <image :src="startPic" class="icon" v-show="!status"></image>
      <image :src="endPic" class="icon" v-show="status"></image>
    </view>
    <view class="flex-1">
      <slider
        @change="changeAudio"
        :activeColor="activeColor"
        backgroundColor="#D8D8D8"
        block-size="12"
        :min="0"
        :max="duration.toFixed(0)"
        :value="currentTime.toFixed(0)"
        :step="0.1"
      ></slider>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      context: uni.createInnerAudioContext(),
      currentTime: 0,
      duration: 0,
      status: false,
    };
  },
  props: {
    url: String,
    activeColor: {
      type: String,
      default: "#E2EA04",
    },
    startPic: String,
    endPic: String,
    audioId: [String, Number],
  },
  watch: {
    audioId() {
      this.init();
    },
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.context.src = this.url;
      this.status = false;
      this.onTimeUpdate();
      this.onCanplay();
      this.onEnded();
      uni.$on("stop", (id) => {
        if (id && id != this.audioId) {
          this.context.stop();
          this.status = false;
        } else if (!id) {
          this.context.stop();
          this.status = false;
        }
      });
    },
    start(id) {
      //点击播放
      let audioId = id;
      if (this.status) {
        this.context.pause();
        this.status = !this.status;
      } else {
        uni.$emit("stop", id);
        this.context.play();
        this.status = !this.status;
      }
    },
    pause() {
      if (!this.status) return;
      this.context.pause();
      this.status = !this.status;
    },
    onCanplay() {
      //进入可播放状态
      this.context.onCanplay(() => {
        this.currentTime = 0;
        this.context.duration;
        setTimeout(() => {
          this.duration = this.context.duration;
        }, 1000);
      });
    },
    onTimeUpdate() {
      //音频播放进度
      this.context.onTimeUpdate(() => {
        if (!Number.isFinite(this.context.duration)) {
          this.context.currentTime = Number.MAX_SAFE_INTEGER;
          this.context.currentTime = 0;
        } else {
          this.duration = this.context.duration;
          this.currentTime = this.context.currentTime;
        }
      });
    },
    onEnded() {
      //播放结束
      this.context.onEnded(() => {
        this.status = false;
        this.currentTime = 0;
      });
    },
    changeAudio(e) {
      let paused = this.context.paused;
      this.context.pause();
      this.context.seek(e.detail.value);
      if (!paused) {
        this.context.play();
      }
    },
    getTime(time) {
      let m = parseInt(time / 60);
      let s = time % 60;
      return this.towNum(m) + ":" + this.towNum(s);
    },
    towNum(num) {
      if (num >= 10) {
        return num;
      } else {
        return "0" + num;
      }
    },
  },
};
</script>

<style>
.audio {
  flex: 1;
  height: 100%;
}

.icon {
  width: 48rpx;
  height: 48rpx;
}
.flex {
  display: flex;
  flex-direction: row;
}

.justify-between {
  justify-content: between;
}

.align-center {
  align-items: center;
}

.flex-1 {
  flex: 1;
}
[v-cloak] {
  display: none;
}
</style>
